<template>
  <view class="rights-container" id="rights-container">
    <scroll-view
      scroll-y
      style="height: 100vh"
      @scrolltolower="reachBottom"
      @scroll="onScroll"
      :scroll-top="scrollTop"
    >
      <view class="rule" @click="checkRule">规则</view>

      <view class="hd">
        <!-- 顶部背景和标题 -->
        <view class="header">
          <view class="title">会员权益中心</view>
          <view class="points" @click="toScore()">
            <text>我的{{ t("积分") }}</text>
            <text class="point-num">{{ myscore }}</text>
            <text class="arrow">></text>
          </view>
          <image src="../static/img/qy_logo.png" class="logo-icon"></image>
        </view>

        <!-- 签到领积分 -->
        <view class="sign-in-card">
          <view class="sign-header">
            <text class="title">签到领{{ t("积分") }}</text>
            <text class="subtitle">已连签{{ sign_day_num }}天</text>
            <text class="tip">签到提醒</text>
            <!-- <switch class="switch" :checked="isSub" @change="onSubChange" color="#4CD964"
                            style="transform: scale(.6,.6);" /> -->
            <switch
              class="switch"
              v-if="isSub"
              :checked="true"
              @change="onSubChange2"
              color="#4CD964"
              style="transform: scale(0.6, 0.6)"
            />
            <switch
              class="switch"
              v-if="!isSub"
              :checked="false"
              @change="onSubChange"
              color="#eee"
              style="transform: scale(0.6, 0.6)"
            />
          </view>
          <view class="sign-days">
            <view
              class="day-item"
              v-for="(day, index) in signList"
              :key="index"
            >
              <button
                class="day-item-card"
                :disabled="day.sign_status == 1"
                :class="{ signed: day.sign_status == 1 }"
                @click="SignIn()"
              >
                <text class="point" v-if="day.sign_status == 0"
                  >+{{ day.sign_score }}</text
                >
                <text
                  class="point"
                  v-if="day.sign_status == 1"
                  :class="{ signed: day.sign_status == 1 }"
                  >已签</text
                >
                <image :src="day.sign_img" class="coin-icon"></image>
              </button>
              <text class="day-text">
                {{ day.sign_day_title }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 生活特权 -->
      <view class="life-card" v-if="leftimg">
        <view class="card-title">生活特权</view>
        <view class="card-content" @click="tolifeDetail">
          <image
            :src="leftimg"
            style="width: 100%; height: 100%"
            mode="widthFix"
          >
          </image>
        </view>
      </view>

      <!-- 做任务领积分 -->
      <view class="task-card">
        <view class="card-title">做任务领{{ t("积分") }}</view>
        <view class="task-list">
          <view
            class="task-item"
            v-for="(task, index) in taskList"
            :key="index"
          >
            <view class="task-left">
              <image :src="task.img" class="task-icon"></image>
              <view class="task-info">
                <view class="task-name"
                  >{{ task.title }}
                  <image src="../static/img/jingbi.png" class="task-i"></image>
                  <text class="task-points">+{{ coverScore(task.score) }}</text>
                </view>
                <view class="task-desc">{{ task.tips }} </view>
              </view>
            </view>
            <view class="task-right">
              <!-- <text class="task-points">+{{ task.points }}</text> -->
              <view
                class="task-btn"
                :class="{ 'task-btn2': task.status == 0 }"
                @click="handleTask(task)"
              >
                {{ task.statustitle }}</view
              >
            </view>
          </view>
        </view>
      </view>

      <!-- 活动领券 -->
      <view class="coupon-card">
        <text class="card-title2">——————————————</text>
        <view class="card-title">活动领券</view>
        <view
          class="coupon-item"
          v-for="(item, index) in couponList"
          :key="item.id"
        >
          <!-- <view class="coupon-tag">{{ coverType(item.type) }}</view> -->
          <view class="coupon-tag">{{ item.typetxt }}</view>
          <view class="coupon">
            <view class="coupon-l">
              <view class="coupon-left">
                <view class="coupon-left-content">
                  <image :src="item.proimg" class="coupon-image"></image>
                  <view class="coupon-info">
                    <view class="coupon-name">{{ item.name }}</view>
                    <view class="coupon-price" v-if="item.unit_price">
                      <text class="price">¥{{ item.unit_price }}</text>
                      <text class="label">券后价</text>
                    </view>
                  </view>
                </view>
                <view class="coupon-time">
                  仅剩
                  <uni-countdown
                    :show-day="true"
                    :showColon="false"
                    color="gray"
                    splitorColor="gray"
                    :day="item.day"
                    :hour="item.hour"
                    :minute="item.minute"
                    :second="item.second"
                  ></uni-countdown>
                  | 已发放{{ item.getnum }}张
                </view>
              </view>
            </view>
            <view class="coupon-r">
              <text class="discount">¥{{ item.money }}</text>
              <text class="condition">{{ item.tips }}</text>
              <view class="get-btn" @click="tobuy(item)">领券购</view>
            </view>
          </view>
          <view class="coupon-tip">{{ item.usetips }}</view>
        </view>
      </view>
      <nomore text="没有更多内容了" v-if="nomore"></nomore>
    </scroll-view>

    <!-- 签到成功弹窗 -->
    <view class="sign-popup" v-if="showSignPopup" @click.stop="closePopup">
      <view class="popup-content" @click.stop>
        <view class="sign-days">已连签{{ sign_day_num }}天！恭喜你获得</view>
        <view class="sign-content">
          <view class="sign-success">
            <image src="../static/img/qy_logo.png" class="success-icon"></image>
            <text class="success-text">和大{{ t("积分") }}</text>
            <text class="success-text2" :style="{ color: t('color1') }"
              >+{{ toDay.sign_score }}</text
            >
          </view>
          <view class="points-info"
            >明日签到可领{{ nextDay.sign_score }}{{ t("积分") }}</view
          >
          <view
            class="remind-btn"
            :style="
              'background:linear-gradient(to right,' +
              t('color1') +
              ',' +
              t('color2')
            "
            @click="handleRemind"
            >提醒明日签到</view
          >
          <!-- <view class="check-points" @click="goToPoints">可前往「个人中心-积分」查看</view> -->
        </view>
        <view class="close-btn" @click="closePopup">
          <image src="../../static/img/close2.png" class="close-icon"></image>
        </view>
      </view>
    </view>

    <!-- 提醒签到弹窗 -->
    <view class="sign-popup" v-if="showSignPopup2" @click.stop="closePopup">
      <view class="popup-content" @click.stop style="width: 600rpx">
        <view class="sign-days2">连续签到，开启{{ t("积分") }}宝箱</view>
        <view class="sign-content">
          <view class="sign-success">
            <image src="../static/img/rili.png" class="success-icon2"></image>
            <view class="sign-day">
              <view
                class="day-item"
                v-for="(day, index) in signList"
                :key="index"
              >
                <button
                  class="day-item-card"
                  :disabled="day.sign_status == 1"
                  :class="{ signed: day.sign_status == 1 }"
                >
                  <text class="point" v-if="day.sign_status == 0"
                    >+{{ day.sign_score }}</text
                  >
                  <text
                    class="point"
                    v-if="day.sign_status == 1"
                    :class="{ signed: day.sign_status == 1 }"
                    >已签</text
                  >
                  <image :src="day.sign_img" class="coin-icon"></image>
                </button>
                <text class="day-text">
                  {{ day.sign_day_title }}
                </text>
              </view>
            </view>
          </view>
          <view
            class="remind-btn"
            :style="
              'background:linear-gradient(to right,' +
              t('color1') +
              ',' +
              t('color2')
            "
            @click="toRemind"
          >
            立即签到+{{ toDay.sign_score }}{{ t("积分") }}</view
          >
        </view>
        <view class="close-btn" @click="closePopup2">
          <image src="../../static/img/close2.png" class="close-icon"></image>
        </view>
      </view>
    </view>

    <!-- 生活特权详情图 -->
    <view class="sign-popup" v-if="showSignPopup4">
      <view class="popup-content2" @click.stop style="width: 90vw">
        <view class="sign-ic">
          <image class="sign-img" :src="leftimgd" mode="widthFix"> </image>
        </view>

        <view class="close-btn" @click="closePopup3">
          <image src="../../static/img/close2.png" class="close-icon"></image>
        </view>
      </view>
    </view>

    <!-- 规则弹窗 -->
    <view class="sigin-rule" v-if="showSignPopup3">
      <!-- <text></text> -->
      <view style="overflow: scroll; height: 100%; padding: 20rpx">
        <parse :content="rcontent" @navigate="navigate"></parse>
      </view>
      <view
        style="
          position: absolute;
          z-index: 9999;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
          width: 50%;
          height: 60rpx;
          line-height: 60rpx;
          color: #fff;
          border-radius: 38rpx;
        "
        :style="{ background: '' + t('color1') + '' }"
        @tap="closeRule"
        >我知道了</view
      >
    </view>

    <!-- <scrolltop :isshow="showBackTop"></scrolltop> -->
    <image
      v-if="showBackTop"
      class="back-to-top"
      :src="static_url + '/static/img/backTop.png'"
      @click="backToTop"
    >
    </image>
  </view>
</template>

<script>
var app = getApp();
import ic from "../static/img/jingbi.png";
export default {
  data() {
    return {
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      scrollTop: 0,
      myscore: 0,
      leftimg: "",
      leftimgd: "",
      signList: [
        // {
        //     sign_status: 0,
        //     sign_day_title: "第一天",
        //     sign_img: ic,
        //     sign_score: 1,
        // }
      ],
      taskList: [
        // {
        //     img: '../static/img/album.png',
        //     title: '完善基础信息',
        //     tips: '完善个人资料、修改头像和昵称',
        //     score: 10,
        //     statustitle: '去完善',
        //     status: 0
        // }
      ],
      couponList: [
        // {
        //     tag: '新人券',
        //     name: '新人券-4箱减60【通过远方好物小程序下单...',
        //     price: 29.9,
        //     time: '321天09时23分26秒',
        //     day: 1,
        //     hour: 1,
        //     minute: 1,
        //     second: 10,
        //     num: 37055,
        //     cprice: 10,
        //     must: '无门槛',
        //     tips: '新希望牛奶新人券(仅限商品新用户领用，限领1张)，若活动结束，优惠活动就结束'
        // },
      ],
      rcontent: "",
      sign_day_num: 0,
      showSignPopup: false,
      showSignPopup2: false,
      showSignPopup3: false,
      showSignPopup4: false,
      isSigned: false, //今日是否已签到
      isSub: false, //签到提醒
      showBackTop: false,
      hasdown: true,
      toDay: null,
      nextDay: null,
      pagelimit: 10,
      pagenum: 1,
      canloadcl: true,
      nomore: false,
    };
  },
  onLoad: function (opt) {
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getdata() {
      var that = this;
      app.showLoading("加载中");
      app.get("MemberCenter/getset", {}, function (res) {
        if (res.code == 200) {
          console.log(res);
          if (res.res.set.is_open == 0) {
            app.showLoading(false);
            that.loaded();
            uni.showModal({
              title: "提示",
              content: "会员权益已关闭",
              success: (res) => {
                app.goback();
              },
            });
          }

          if (res.res.member.today_sign_status === 1) {
            let tindex = res.res.signlist.findIndex(
              (item) => item.sign_status === 0
            );
            if (tindex == -1) {
              //说明已经全部签到
              that.toDay = res.res.signlist[res.res.signlist.length - 1];
              that.nextDay = res.res.signlist[0];
            } else if (tindex == res.res.signlist.length - 1) {
              that.toDay = res.res.signlist[tindex - 1];
              that.nextDay = res.res.signlist[tindex];
            } else {
              that.toDay = res.res.signlist[tindex - 1];
              that.nextDay = res.res.signlist[tindex];
            }
          } else {
            let tindex = res.res.signlist.findIndex(
              (item) => item.sign_status === 0
            );
            if (tindex == 0) {
              that.toDay = res.res.signlist[tindex];
              that.nextDay = res.res.signlist[tindex + 1];
            } else if (tindex == res.res.signlist.length - 1) {
              that.toDay = res.res.signlist[tindex];
              that.nextDay = res.res.signlist[0];
            } else {
              that.toDay = res.res.signlist[tindex];
              that.nextDay = res.res.signlist[tindex + 1];
            }
          }

          that.signList = res.res.signlist;
          that.sign_day_num = res.res.member.sign_day_num;
          that.myscore = res.res.member.score;
          that.isSub = res.res.member.sign_remind_status == 1 ? true : false;
          that.rcontent = res.res.set.content;
          that.leftimg = res.res.set.life_privilege_img;
          that.leftimgd = res.res.set.life_privilege_detial_img;
          that.taskList = res.res.tasklist;
          that.isSigned = res.res.member.today_sign_status == 0 ? false : true;
          if (!that.isSigned) {
            that.showSignPopup2 = true;
          }
          // that.getSubStatus();
          app.showLoading(false);
          that.loaded();
          that.getCoupList();
        } else {
          app.showLoading(false);
          that.loaded();
        }
      });
    },

    getCoupList() {
      var _that = this;
      app.get(
        "MemberCenter/getactiveconpoulist",
        { pagenum: _that.pagenum, pagelimit: _that.pagelimit },
        function (res) {
          if (res.code == 200) {
            // _that.couponList = res.data.map(c => {
            //     // 先调用倒计时函数获取结果
            //     const countdown = _that.getDateTimeCountdown(c.endtime);
            //     // 然后合并到原对象中
            //     return {
            //         ...c,
            //         countdown // 将倒计时结果作为一个新字段加入
            //     };
            // });

            // 如果需要单独处理倒计时显示，可以这样：

            if (res.data.length == 0) {
              _that.nomore = true;
            } else {
              let cl = res.data.map((c) => ({
                ...c,
                day: _that.getDateTimeCountdown(c.endtime).days,
                hour: _that.getDateTimeCountdown(c.endtime).hours,
                minute: _that.getDateTimeCountdown(c.endtime).minutes,
                second: _that.getDateTimeCountdown(c.endtime).seconds,
              }));
              _that.couponList = _that.couponList.concat(cl);
            }
          }
        }
      );
    },

    getDateTimeCountdown(targetDateTime) {
      try {
        // 获取当前时间
        const now = new Date();

        // 解析目标日期时间
        const [datePart, timePart] = targetDateTime.split(" ");
        const [year, month, day] = datePart.split("-").map(Number);
        const [targetHours, targetMinutes, targetSeconds] = timePart
          .split(":")
          .map(Number); // 重命名这里的hours变量

        // 创建目标日期对象（注意月份是0-11）
        const targetDate = new Date(
          year,
          month - 1,
          day,
          targetHours,
          targetMinutes,
          targetSeconds
        );

        // 计算时间差（毫秒）
        const diff = targetDate - now;

        // 如果时间已过，返回全0
        if (diff <= 0) {
          return {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
          };
        }

        // 转换为天、时、分、秒
        let remaining = Math.floor(diff / 1000); // 总秒数
        const days = Math.floor(remaining / (24 * 60 * 60));
        remaining %= 24 * 60 * 60;
        const hours = Math.floor(remaining / (60 * 60)); // 现在这是唯一的hours声明
        remaining %= 60 * 60;
        const mins = Math.floor(remaining / 60);
        const secs = remaining % 60;

        return {
          days,
          hours,
          minutes: mins,
          seconds: secs,
        };
      } catch (error) {
        console.log(error);
        return 0;
      }
    },

    getSubStatus: function (e) {
      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 5,
        },
        function (res) {
          var tmplIds = res.res;
          console.log(tmplIds);
          if (res.res) {
            wx.getSetting({
              withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
              success: function (res) {
                console.log(res);
                // 调起授权界面弹窗
                if (res.subscriptionsSetting.mainSwitch) {
                  // 用户打开了订阅消息总开关
                  if (res.subscriptionsSetting.itemSettings != null) {
                    // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
                    let moIdState =
                      res.subscriptionsSetting.itemSettings[tmplIds]; // 用户同意的消息模板id
                    if (moIdState === "accept") {
                      console.log("接受了消息推送");
                    } else if (moIdState === "reject") {
                      console.log("拒绝消息推送");
                    } else if (moIdState === "ban") {
                      console.log("已被后台封禁");
                    }
                  }
                } else {
                  console.log("订阅消息未开启");
                }
              },
              fail: function (error) {
                console.log(error);
              },
            });
          }
        }
      );
      // #endif
    },

    getTmplIds: function (e) {
      let that = this;
      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 5,
        },
        function (res) {
          var tmplIds = res.res;
          console.log(tmplIds);
          if (res.res) {
            wx.requestSubscribeMessage({
              tmplIds: tmplIds,
              success(res) {
                console.log("订阅消息获取成功");
                console.log(res);
                if (res[tmplIds] == "reject") {
                  that.isSub = false;
                  console.log("用户点击拒接", that.isSub);
                  that.$forceUpdate();
                }
                if (res[tmplIds] == "accept") {
                  console.log("用户点击接收");
                  app.get("MemberCenter/sign_remind", {}, function (res) {
                    if (res.code == 200) {
                      that.isSub = true;
                    } else {
                      app.error(res.msg);
                      that.isSub = false;
                    }
                  });
                }
              },
              fail(er) {
                console.log("订阅消息获取失败");
                console.log(er);
                that.isSub = false;
              },
              complete(res, err) {
                that.getdata();
              },
            });
          } else {
            app.error(res.msg);
            // that.getdata();
            that.isSub = false;
          }
        }
      );
      // #endif
    },

    // 回到顶部方法
    backToTop() {
      this.scrollTop = 0;
      // 解决某些情况下不生效的问题
      this.$nextTick(() => {
        this.scrollTop = 0.1; // 强制触发重新渲染
        setTimeout(() => {
          this.scrollTop = 0;
        }, 10);
      });
    },

    reachBottom() {
      // this.couponList = [...this.couponList, ...this.couponList]
      if (!this.nomore) {
        this.pagenum += 1;
        this.getCoupList();
      }
    },

    onScroll(e) {
      this.scrollY = e.detail.scrollTop;
      if (this.scrollY > 200) {
        this.showBackTop = true;
      } else if (this.scrollY < 150) {
        this.showBackTop = false;
      }
    },

    onSubChange() {
      // this.isSub = !this.isSub
      // console.log(this.isSub)
      this.getTmplIds();
    },

    onSubChange2() {
      // this.isSub = !this.isSub
      // console.log(this.isSub)
      let that = this;
      app.get("MemberCenter/sign_remind", {}, function (res) {
        if (res.code == 200) {
          that.isSub = true;
        } else {
          app.error(res.msg);
          that.isSub = false;
        }
        that.getdata();
      });
    },

    handleTask(task) {
      if (task.status == 1) {
        app.error("已完成");
        return;
      }
      if (task.url.includes("https")) {
        uni.navigateTo({
          url: `/pagesZone/webview/index?url=${encodeURIComponent(task.url)}`,
        });
      } else {
        app.goto(task.url);
      }
    },

    // 签到
    SignIn() {
      let that = this;
      app.showLoading("签到中...");
      app.post("MemberCenter/sign", {}, function (data) {
        app.showLoading(false);
        if (data.code == 200) {
          that.getdata();
          that.showSignInPopup(); // 显示成功弹窗
        }
        if (data.code == 201) {
          app.error("今天" + data.msg);
        }
        if (data.code == 429) {
          app.error(data.msg);
        }
      });
    },

    //1代金券2礼品券3计次券4运费抵扣券5餐饮券20券包30当面付抵扣券40电影通用兑换券
    coverType(type) {
      switch (type) {
        case 1:
          return "代金券";
        case 2:
          return "礼品券";
        case 3:
          return "计次券";
        case 4:
          return "运费抵扣券";
        case 5:
          return "餐饮券";
        case 20:
          return "券包3";
        case 30:
          return "当面付抵扣券";
        case 40:
          return "电影通用兑换券";
        default:
          break;
      }
    },

    tobuy(item) {
      // productid
      // if (item.pid || item.productid) {
      //优惠券商品类型 0=全部商品 1=分类商品 2=指定商品
      if (item.fwtype == 0) {
        app.goto("/pages/shop/classify");
      }
      if (item.fwtype == 1) {
        app.goto(
          "/pages/shop/prolist?cid=" + item.cid + "&proid=" + item.proid
        );
      }
      if (item.fwtype == 2) {
        app.goto("/pages/shop/prolist?proid=" + item.proid);
      }
      // } else {
      //     app.error("商品id缺失" + item.pid)
      // }
    },

    //弹窗签到
    toRemind() {
      this.showSignPopup2 = false;
      // this.showSignPopup = true
      this.SignIn();
    },

    // 处理签到
    handleSignIn() {
      if (this.isSigned) return; // 如果已签到则不处理
      this.isSigned = true; // 设置签到状态
      this.showSignInPopup(); // 显示弹窗
      // 可以在这里添加签到请求逻辑
    },

    // 显示签到弹窗
    showSignInPopup() {
      this.showSignPopup = true;
    },

    // 关闭弹窗
    closePopup() {
      this.showSignPopup = false;
    },
    closePopup2() {
      this.showSignPopup2 = false;
    },
    closePopup3() {
      this.showSignPopup4 = false;
    },

    // 设置提醒
    handleRemind() {
      // uni.showToast({
      //     title: '已设置提醒',
      //     icon: 'success'
      // })
      this.closePopup();
      if (this.isSub) {
        app.error("已经设置提醒");
      } else {
        this.onSubChange();
      }
    },

    // 跳转到积分页面
    goToPoints() {
      app.goto("/pagesExt/my/scorelog");
      this.closePopup();
    },
    tolifeDetail() {
      this.showSignPopup4 = true;
    },
    checkRule() {
      this.showSignPopup3 = true;
    },
    closeRule() {
      this.showSignPopup3 = false;
    },
    toScore() {
      app.goto("/pagesExt/my/scorelog");
    },

    //特殊奖励转换 {"lt":"100","score":"100","gte":"100","score2":"50","max":"150"}
    coverScore(str) {
      console.log(str);
      if (String(str).includes("{")) {
        let obj = JSON.parse(str);
        console.log(obj);
        return `邀请成功${obj.lt}人以内，赠送${obj.score}积分，邀请成功${obj.gte}人及以上，赠送${obj.score2}积分，每日封顶${obj.max}人`;
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="scss">
.rights-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;

  .rule {
    position: absolute;
    top: 120rpx;
    right: 0rpx;
    background-color: rgba(255, 255, 255, 0.5);
    /* 背景颜色 */
    border-radius: 10rpx;
    /* 圆角 */
    // box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
    /* 阴影 */
    padding: 12rpx 10rpx;
    /* 内边距 */
    font-size: 16px;
    /* 字体大小 */
    color: #333;
    /* 字体颜色 */
    cursor: pointer;
    /* 鼠标悬停时显示为手形 */
    z-index: 99;
    font-size: 25rpx;
    width: 40rpx;
  }

  .hd {
    background: linear-gradient(to bottom, #eccd8b, #f5f5f5);
  }

  .header {
    height: 230rpx;
    // background: linear-gradient(to bottom, #f8e7ce, #f5f5f5);
    padding: 40rpx 30rpx;
    position: relative;
    display: flex;
    text-align: left;
    justify-content: end;
    flex-direction: column;
    align-items: flex-start;

    .title {
      font-size: 50rpx;
      color: #5a1501;
      font-weight: bold;
      text-shadow: -1px 0 rgba(255, 255, 255, 1), 0 1px rgba(255, 255, 255, 1),
        1px 0 rgba(255, 255, 255, 1), 0 -1px rgba(255, 255, 255, 1);
      // 字体加白边
    }

    .points {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #666;

      .point-num {
        margin: 0 10rpx;
        font-weight: bold;
      }

      .arrow {
        color: #999;
      }
    }

    .logo-icon {
      width: 228rpx;
      height: 180rpx;
      position: absolute;
      right: 100rpx;
      bottom: 0;
      animation: float 3s ease-in-out infinite;
      /* 动画名称 | 时长 | 缓动函数 | 无限循环 */
    }

    /* 定义动画关键帧 */
    @keyframes float {
      0% {
        transform: translateY(0);
        /* 初始位置 */
      }

      50% {
        transform: translateY(-20rpx);
        /* 向上移动20px */
      }

      100% {
        transform: translateY(0);
        /* 返回初始位置 */
      }
    }
  }

  .sign-in-card {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    background: linear-gradient(45deg, #fff 60%, #fffbeb);

    .sign-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }

      .subtitle {
        font-size: 26rpx;
        color: #666;
        margin-left: 20rpx;
      }

      .tip {
        font-size: 26rpx;
        // color: #999;
        margin-left: auto;
      }

      .switch {
        width: 60rpx;
      }
    }

    .sign-days {
      display: flex;
      justify-content: space-between;

      .day-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .day-item-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          cursor: pointer; // 添加鼠标手型
          background-color: #fff7e6;
          border-radius: 10rpx;
          padding: 0 10rpx;

          &.signed {
            background-color: #fbfbfc;
            opacity: 0.8;
          }
        }

        .coin-icon {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }

        .point {
          font-size: 24rpx;
          color: #ff6b6b;

          &.signed {
            color: #cecece;
          }
        }

        .day-text {
          font-size: 24rpx;
          color: #666;
          margin-top: 6rpx;
        }

        .gift-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }

        .gift-text {
          font-size: 20rpx;
          color: #ff6b6b;
          margin-top: 4rpx;
        }

        &:first-child {
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }

  .life-card {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    background: linear-gradient(45deg, #fff 60%, #fffbeb);

    .card-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 30rpx;
    }

    .card-content image {
      border-radius: 16rpx;
    }
  }

  .task-card {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    background: linear-gradient(45deg, #fff 60%, #fffbeb);

    .card-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 30rpx;
    }

    .task-list {
      .task-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .task-left {
          display: flex;
          align-items: center;

          .task-icon {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
          }

          .task-info {
            .task-name {
              font-size: 28rpx;
              color: #333;
              margin-bottom: 8rpx;
              font-weight: bold;

              .task-i {
                width: 26rpx;
                height: 26rpx;
                margin: 0 6rpx;
              }
            }

            .task-desc {
              font-size: 24rpx;
              color: #999;
            }
          }
        }

        .task-right {
          display: flex;
          align-items: center;

          .task-points {
            font-size: 28rpx;
            color: #ff6b6b;
            margin-right: 20rpx;
          }

          .task-btn {
            padding: 10rpx 30rpx;
            background: #f5f5f5;
            border-radius: 30rpx;
            font-size: 26rpx;
            color: #666;
          }

          .task-btn2 {
            background: #fff;
            border: 1px solid #bfbcbc;
            color: #000;
            text-wrap: nowrap;
            white-space: nowrap; //小程序才支持的禁止换行
          }
        }
      }
    }
  }

  // 签到弹窗样式
  .sign-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    .popup-content {
      // width: 600rpx;
      // background: #fff;
      border-radius: 24rpx;
      padding: 40rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sign-days {
        font-size: 50rpx;
        color: #fff7e6;
        font-weight: bold;
        margin-bottom: 40rpx;
        position: relative;
        padding-bottom: 20rpx;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          // background: #00b578;
          border-radius: 2rpx;
        }
      }

      .sign-days2 {
        font-size: 40rpx;
        color: #fff7e6;
        margin-bottom: 40rpx;
        position: relative;
        padding-bottom: 20rpx;
      }

      .sign-content {
        background: #fff;
        border-radius: 30rpx;
        padding: 40rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(to top, #fff, #fffada);

        .sign-success {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 0rpx;

          .success-icon {
            width: 272rpx;
            height: 190rpx;
            position: relative;
            top: -80rpx;
          }

          .success-icon2 {
            width: 192rpx;
            height: 190rpx;
            position: relative;
            top: -100rpx;
          }

          .success-text {
            font-size: 42rpx;
            color: #333;
            font-weight: bold;
            position: relative;
            top: -40rpx;
          }

          .success-text2 {
            margin-top: 30rpx;
            font-size: 62rpx;
            color: #333;
            font-weight: bold;
            position: relative;
            top: -40rpx;
          }
        }

        .points-info {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 40rpx;
        }

        .remind-btn {
          width: 400rpx;
          height: 80rpx;
          background: linear-gradient(to right, #00b578, #00d3a3);
          border-radius: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 35rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
        }

        .check-points {
          font-size: 24rpx;
          color: #999;
          // text-decoration: underline;
        }

        .sign-day {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          background-color: #fff;
          padding: 20rpx;
          position: relative;
          top: -70rpx;

          .day-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex: 0 0 25%;

            .day-item-card {
              display: flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              cursor: pointer; // 添加鼠标手型
              background-color: #fff7e6;
              border-radius: 10rpx;
              padding: 0 10rpx;
              width: 90%;

              &.signed {
                background-color: #fbfbfc;
                opacity: 0.8;
              }
            }

            .coin-icon {
              width: 60rpx;
              height: 60rpx;
              margin-bottom: 10rpx;
            }

            .point {
              font-size: 24rpx;
              color: #ff6b6b;

              &.signed {
                color: #cecece;
              }
            }

            .day-text {
              font-size: 24rpx;
              color: #666;
              margin-top: 6rpx;
            }

            .gift-icon {
              width: 40rpx;
              height: 40rpx;
              position: absolute;
              top: -10rpx;
              right: -10rpx;
            }

            .gift-text {
              font-size: 20rpx;
              color: #ff6b6b;
              margin-top: 4rpx;
            }

            &:first-child {
              &:hover {
                opacity: 0.8;
              }
            }

            &:last-child {
              flex-grow: 1;
            }
          }
        }
      }

      .close-btn {
        // position: absolute;
        // bottom: -100rpx;
        // left: 50%;
        // transform: translateX(-50%);
        margin-top: 50rpx;
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 5rpx solid #fff;
        border-radius: 50%;

        .close-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .popup-content2 {
      border-radius: 24rpx;
      padding: 40rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      // height: 90%;

      .sign-ic {
        .sign-img {
          border-radius: 24rpx;
          max-width: 90vw;
          max-height: 70vh;
          // width: 90vw;
          // height: 100%;
          // overflow: scroll;
        }
      }

      .close-btn {
        margin-top: 50rpx;
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 5rpx solid #fff;
        border-radius: 50%;

        .close-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .coupon-card {
    // margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx 0;
    position: relative;
    padding: 20rpx;
    padding-top: 120rpx;

    .card-title {
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 30rpx 20rpx;
      font-size: 32rpx;
    }

    .card-title2 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 30rpx 20rpx;
      color: #b7b7b7;
      font-size: 32rpx;
      opacity: 0.5;
    }

    .coupon-item {
      display: flex;
      border-radius: 16rpx;
      margin-bottom: 40rpx;
      // border: 2rpx solid #FFDDD0;
      flex-direction: column;

      .coupon-tag {
        display: inline-block;
        padding: 4rpx 12rpx;
        background: #fd265b;
        font-size: 24rpx;
        color: #fff;
        position: absolute;
        z-index: 9;
        border-radius: 16rpx 0 16rpx 0;
      }

      .coupon {
        width: 100%;
        display: flex;
        border-radius: 16rpx;
        // overflow: hidden;
        position: relative;
        border: 3rpx solid #ffddd0;

        .coupon-l {
          height: 100%;
          flex: 1;
          // background-color: #b3bcce;
          display: flex;
          flex-direction: column;
          padding: 20rpx;
          gap: 10rpx;

          .coupon-left-content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20rpx 0;

            .coupon-image {
              width: 90rpx;
              height: 90rpx;
              border-radius: 8rpx;
              margin-right: 20rpx;
            }

            .coupon-info {
              flex: 1;

              .coupon-name {
                font-size: 30rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 10rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 48vw;
              }

              .coupon-price {
                margin-bottom: 10rpx;

                .price {
                  font-size: 32rpx;
                  color: #ff6b6b;
                  font-weight: bold;
                }

                .label {
                  font-size: 24rpx;
                  color: #ff6b6b;
                  margin-left: 10rpx;
                }
              }
            }
          }

          .coupon-time {
            font-size: 22rpx;
            color: #999;
            border-top: 1rpx solid #eee;
            padding-top: 10rpx;
            display: flex;
            align-items: center;

            ::v-deep .uni-countdown .uni-countdown__number {
              font-size: 22rpx;
              width: auto;
              color: #999;
              height: auto;
              line-height: auto;
              margin: 0rpx;
            }

            ::v-deep .uni-countdown .uni-countdown__splitor {
              font-size: 22rpx;
              width: auto;
              color: #999;
            }
          }
        }

        .coupon-r {
          width: 200rpx;
          background-color: #fff6f2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-left: 2rpx dashed #ffddd0;

          .discount {
            font-size: 40rpx;
            color: #ff6b6b;
            font-weight: bold;
          }

          .condition {
            font-size: 24rpx;
            color: #ff6b6b;
            margin: 10rpx 0;
            text-align: center;
          }

          .get-btn {
            padding: 10rpx 30rpx;
            background: #ff6b6b;
            background: linear-gradient(to right, #ff9c9b, #ff6b6b);
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #fff;
            font-weight: bold;
          }
        }

        &:before {
          position: absolute;
          right: 184rpx;
          top: -8px;
          width: 32rpx;
          height: 32rpx;
          background-color: #fff;
          border-radius: 50%;
          content: "";
          border: 3rpx solid #ffddd0;
          z-index: 9;
          clip-path: inset(40% 0 0 0);
        }

        &:after {
          position: absolute;
          right: 184rpx;
          bottom: -8px;
          width: 32rpx;
          height: 32rpx;
          background-color: #f7f8f9;
          border-radius: 50%;
          content: "";
          border: 3rpx solid #ffddd0;
          z-index: 9;
          clip-path: inset(0 0 40% 0);
        }
      }

      .coupon-tip {
        background-color: #f7f8f9;
        border-radius: 0rpx 0rpx 16rpx 16rpx;
        padding: 10rpx 20rpx;
        color: #999;
        font-size: 22rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .sigin-rule {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
}

.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 15vh;
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
  transition: all 0.3s;
  background-color: #fff;
  border-radius: 50%;
  padding: 20rpx;
}
</style>
